import React, { useState } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { Button, Col, DatePicker, Drawer, Form, Input, Row, Select, Space } from 'antd';
import dayjs from "dayjs";
import DrawTable from './drawTable'
const { Option } = Select;
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY-MM-DD';
import { getFormatDate } from '@/utils/index'
const App = (props) => {
  //
  const [defaultValue, setDefaultValue] = useState<any>(getFormatDate(1))
  const [open, setOpen] = useState(false);

  const showDrawer = () => {
    setOpen(true);
  };

  const onClose = () => {
    setOpen(false);
  };
  const handleChange = (value) => {
    const fT = getFormatDate(value)
    setDefaultValue(fT)
  }
  React.useImperativeHandle(props.onRef, () => {
    return {
      showDrawer: showDrawer,
    };
  });
  return (
    <>
      <Drawer
        title="检验申请"
        width={720}
        onClose={onClose}
        open={open}
        styles={{
          body: {
            paddingBottom: 80,
          },
        }}
        extra={
          <Space>
            <Button onClick={onClose}>重置</Button>
            <Button onClick={onClose} type="primary">
              搜索
            </Button>
          </Space>
        }
      >
        <Form layout="inline" hideRequiredMark>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item style={{marginBottom: '6px'}} label="">
                <div style={{display: 'flex'}}>
                  <Select
                    defaultValue="1"
                    style={{ width: 120 }}
                    onChange={handleChange}
                    options={[
                      { value: '1', label: '今天' },
                      { value: '2', label: '昨天' },
                      { value: '3', label: '本月' },
                      { value: '4', label: '上月' },
                      { value: '5', label: '今年' },
                    ]}
                  />
                  <RangePicker value={defaultValue} />
                </div>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item style={{marginBottom: '6px'}} label='关键词' name='number'>
                <Input placeholder='请输入关键词' />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item style={{marginBottom: '6px'}} label='就诊类型' name='type2'>
                {/* eslint-disable-next-line camelcase */}
                <Select options={[
                  { value: '1', label: '全部' },
                  { value: '2', label: '已核收' },
                  { value: '3', label: '已作废' },
                  { value: '4', label: '已采样' },
                ]} placeholder='请选择标本状态' />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item style={{marginBottom: '6px'}} label='申请科室' name='type'>
                {/* eslint-disable-next-line camelcase */}
                <Select options={[
                  { value: '1', label: '未确认' },
                  { value: '2', label: '已确认' },
                ]} placeholder='请选择标本状态' />
              </Form.Item>
            </Col>
          </Row>
        </Form>
        <div>
          <DrawTable />
        </div>
      </Drawer>
    </>
  );
};

export default App;
